import Taro, { Component, useState, useEffect, useCallback } from '@tarojs/taro';
import { View, Button, Text, Image, ScrollView, Picker } from '@tarojs/components';
import CardBox from '../../components/vip-record';
import Empty from '../../static/public/icon_order.png';
import classnames from 'classnames';
import NavigationBar from '../../components/navigationBar/index';

import './index.scss';
import { CARD_STATUS } from '../../utils/config';
import { memberCardList } from '../../services/card';
import { timeFormat } from '../../utils/utils';

const SexSelector = ['男', '女'];
let pageData = {
  page: 1,
  page_number: 10
};
let isMore = true;
const navigationBarHeight = Taro.getStorageSync('navigationBarHeight');

function UsedCardRecord(props) {

  const [usedCardRecordList, setUsedCardRecordList] = useState([])
  const [card_no, setCard_no] = useState('')
  const [mobile, setMobile] = useState('')
  const [typeRange, setTypeRange] = useState(['会员卡', '红宝石'])
  const [typeRangeIndex, setTypeRangeIndex] = useState(0)

  let { type } = props;
  if (type === 1) {
    // 刷新
    pageData.page = 1;
    init()
  } else if (type === 2) {
    // 加载
    loadMore()
  } else if (type === 0) {
    //
  }

  useEffect(() => {
    pageData = {
      page: 1,
      page_number: 10
    };
    isMore = true;
    init()
  }, [])

  function loadMore() {
    props.onChanged()
    if (isMore) {
      memberCardList({
        ...pageData
      }).then(res => {
        res.list.forEach(card => {
          card.update_time = timeFormat(card.update_time)
          switch (card.member_type) {
            case 1:
              card.member_type = 'VIP贵宾'
              break;
            case 2:
              card.member_type = '红宝石'
              break;
            default:
              break;
          }
          switch (card.status) {
            case 0:
              card.status = '未激活'
              break;
            case 1:
              card.status = '后台激活'
              break;
            case 2:
              card.status = '省代激活'
              break;
            case 3:
              card.status = '区代激活'
              break;
            case 4:
              card.status = '用户激活使用'
              break;
            default:
              break;
          }
          card.time = timeFormat(card.convert_time)
          card.sku = ''
          if (card.has_order_goods) {
            card.has_order_goods.has_order_goods_attr.forEach(item => {
              card.sku += item.goods_sku_attr_name + '；'
            })
          }
        });
        pageData.page++
        isMore = res.list.length < res.total;
        setUsedCardRecordList(usedCardRecordList.concat(res.list))
      })
    }
  }

  function init() {
    props.onChanged()
    memberCardList({
      ...pageData
    }).then(res => {
      res.list.forEach(card => {
        card.update_time = timeFormat(card.update_time)
        switch (card.member_type) {
          case 1:
            card.member_type = 'VIP贵宾'
            break;
          case 2:
            card.member_type = '红宝石'
            break;
          default:
            break;
        }
        switch (card.status) {
          case 0:
            card.status = '未激活'
            break;
          case 1:
            card.status = '后台激活'
            break;
          case 2:
            card.status = '省代激活'
            break;
          case 3:
            card.status = '区代激活'
            break;
          case 4:
            card.status = '用户激活使用'
            break;
          default:
            break;
        }

        card.time = timeFormat(card.convert_time)
        card.sku = ''
        if (card.has_order_goods) {
          card.has_order_goods.has_order_goods_attr.forEach(item => {
            card.sku += item.goods_sku_attr_name + '；'
          })
        }
      });
      pageData.page++
      isMore = res.list.length < res.total;
      setUsedCardRecordList(res.list);
    })
  }
  function handleType(e) {
    let index = parseInt(e.detail.value, 10)
    setTypeRangeIndex(index)
  }
  function search() {
    console.log()
    var index 
    if(typeRangeIndex==0){
      index = 1
    }else if(typeRangeIndex==1){
      index = 2
    }
    pageData = {
      page: 1,
      page_number: 10,
      card_no: card_no,
      mobile: mobile,
      member_type:index
    };
    init()

  }
  function handleText(key, e) {
    setCard_no(e.detail.value)
  }
  function handleTexts(key, e) {
    setMobile(e.detail.value)
  }
  return (
    <View className='card-record' style={`margin-top: ${navigationBarHeight}`}>
      <NavigationBar text="会员卡激活列表" />
      <View className="formitem">
        <View className="label">
          卡号
          </View>
        <Input className="input-item" placeholder-class="phcolor" value={card_no} onInput={(e) => handleText('receiver', e)} placeholder="请输入卡号" />
      </View>
      <View className="formitem">
        <View className="label">
          手机号
          </View>
        <Input className="input-item" placeholder-class="phcolor" value={mobile} onInput={(e) => handleTexts('mobile', e)} type="number" placeholder="请输入手机号" />
      </View>
      <View className="formitem">
        <View className="label">
          类型
          </View>
        <Picker className="type-range" range={typeRange} value={typeRangeIndex} onChange={handleType}>
          <View className='type'>{typeRange[typeRangeIndex]}</View>
        </Picker>      </View>
      <Button className='dec_btn' onClick={search}>
        查询
        </Button>
      <View className="card-list">
        {
          usedCardRecordList.length ? usedCardRecordList.map(card => {
            if (card) return <CardBox viplist={card}/>
          }) : <View className="empty-box">
              <Image src={Empty} className="empty" />
              <View className="tip">暂无信息</View>
            </View>
        }
      </View>
    </View>
  )
}

UsedCardRecord.config = {
  navigationBarTitleText: '我的兑换卡记录',
}

export default UsedCardRecord;
